<template>
  <div>
    <el-card class="filter-container">
      <el-form ref="searchForm" :inline="true" :model="queryParams">
        <el-form-item label="账号" prop="userName">
          <el-input v-model="queryParams.userName" placeholder="账号" />
        </el-form-item>
        <el-form-item label="姓名" prop="nickName">
          <el-input v-model="queryParams.nickName" placeholder="姓名" />
        </el-form-item>
        <el-form-item>
          <el-button :size="buttonSize" type="primary" @click="search">查询</el-button>
          <el-button :size="buttonSize" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card>
      <tableCommon
        ref="table"
        url="/system/user"
        :where="queryParams"
        :button-role-name="roleName"
        @detail="handleDetail"
        @edit="handleEdit"
        @add="handleAdd"
        @delete="handleDelete"
      >
        <el-table-column prop="userName" label="账号" width="180" />
        <el-table-column prop="nickName" label="姓名" width="180" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="phoneNumber" label="手机号码" />
        <el-table-column prop="sex" label="性别" width="100" :formatter="sex" />
        <el-table-column prop="status" label="状态" width="150">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              active-value="0"
              inactive-value="1"
              active-text="启用"
              inactive-text="禁用"
              @change="(newVal) => onChange(newVal, scope.row)"
            />
          </template>
        </el-table-column>
      </tableCommon>
    </el-card>
    <user-dialog
      :id="currentId"
      :dialog-visible.sync="userDialogVisible"
      :title="userDialogTitle"
      :type="userDialogType"
      @success="handleSuccess"
    />
    <view-dialog :id="currentId" :dialog-visible.sync="viewDialogVisible" title="查看" />
  </div>
</template>

<script>
import userDialog from './UserDialog'
import viewDialog from './ViewDialog'
import { deleteUser } from '@/api/user/user'

export default {
  name: 'user',
  components: {
    userDialog,
    viewDialog
  },
  data() {
    return {
      queryParams: {
        userName: '',
        nickName: ''
      },
      roleName: {
        add: 'userAdd',
        edit: 'userEdit',
        detail: 'userDetail',
        delete: 'userDelete'
      },
      buttonSize: 'small',
      userDialogVisible: false,
      userDialogType: '',
      userDialogTitle: '',
      currentId: '',
      viewDialogVisible: false
    }
  },
  methods: {
    handleSuccess() {
      this.$refs.table.reload()
    },
    handleAdd() {
      this.userDialogTitle = '新增'
      this.userDialogType = 'add'
      this.userDialogVisible = true
    },
    handleEdit(row) {
      this.currentId = row.userId
      this.userDialogTitle = '编辑'
      this.userDialogType = 'edit'
      this.userDialogVisible = true
    },
    handleDetail(row) {
      this.currentId = row.userId
      this.viewDialogVisible = true
    },
    handleDelete(row) {
      this.$confirm('确认删除数据？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteUser(row.userId).then((res) => {
          this.$notify({
            title: '成功',
            type: 'success',
            message: '删除成功!',
            duration: 2000
          })
          this.$refs.table.reload()
        })
      })
    },
    reset() {
      this.$refs.searchForm.resetFields()
    },
    search() {
      this.$refs.table.reload(true)
    },
    sex(row, column, cellValue, index) {
      if (cellValue === '0') {
        return '男'
      } else if (cellValue === '1') {
        return '女'
      } else if (cellValue === '2') {
        return '未知'
      } else {
        return ''
      }
    },
    onChange(newValue, row) {}
  }
}
</script>

<style></style>
